<script setup lang="ts">
import { reactive, Ref, ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app'

// import loader1 from '../analysis/analysis.vue'

const flag1: Ref<boolean> = ref(true);
const flag: Ref<boolean> = ref(true);

const switchbar = () => {
  flag.value = !flag.value;
};


onLoad(() => {
  setTimeout(() => {
    flag1.value = false;
  }, 1000);
})



// onMounted(() => {
//   setTimeout(() => {
//     flag1.value = false;
//   }, 1000);
// });
// const switchLeft = ref(0)
// const switch1 = (e: any) => {
// 	switchLeft.value = e.currentTarget.offsetLeft
// 	console.log(e.currentTarget.offsetLeft);

// }

const ranklist = reactive([
  {
    id: 1,
    name: '杨科',
    class: '20软件1班',
    progress: '45%',
    score: 100,
    rank: 1,
  },
  {
    id: 2,
    name: '麦著胜',
    class: '20软件1班',
    progress: '45%',
    score: 98,
    rank: 2,
  },
  {
    id: 3,
    name: '汪凯',
    class: '20软件1班',
    progress: '45%',
    score: 96,
    rank: 3,
  },
  {
    id: 4,
    name: '何灵灵',
    class: '20软件1班',
    progress: '45%',
    score: 95,
    rank: 4,
  },
  {
    id: 5,
    name: '郭树鑫',
    class: '20软件1班',
    progress: '45%',
    score: 95,
    rank: 5,
  },
  {
    id: 6,
    name: '苏浩贤',
    class: '20软件1班',
    progress: '45%',
    score: 85,
    rank: 6,
  },
  {
    id: 7,
    name: '张渝鹏',
    class: '20软件1班',
    progress: '45%',
    score: 84,
    rank: 7,
  },
  {
    id: 8,
    name: '刘泽均',
    class: '20软件1班',
    progress: '45%',
    score: 82,
    rank: 8,
  },
  {
    id: 9,
    name: '黄文波',
    class: '20软件1班',
    progress: '45%',
    score: 81,
    rank: 9,
  },
  {
    id: 10,
    name: '尹浩贤',
    class: '20软件1班',
    progress: '45%',
    score: 80,
    rank: 10,
  }, {
    id: 11,
    name: '杜振宇',
    class: '20软件1班',
    progress: '45%',
    score: 79,
    rank: 11,
  },
  {
    id: 12,
    name: '祁帆',
    class: '20软件1班',
    progress: '45%',
    score: 77,
    rank: 12,
  },
  {
    id: 13,
    name: '何士林',
    class: '20软件1班',
    progress: '45%',
    score: 75,
    rank: 13,
  },
  {
    id: 14,
    name: '林泽凡',
    class: '20软件1班',
    progress: '45%',
    score: 75,
    rank: 14,
  },
  {
    id: 15,
    name: '黄永嘉',
    class: '20软件1班',
    progress: '45%',
    score: 69,
    rank: 15,
  },
  {
    id: 16,
    name: '方卓彬',
    class: '20软件1班',
    progress: '45%',
    score: 65,
    rank: 16,
  },
  {
    id: 17,
    name: '张渝鹏',
    class: '20软件1班',
    progress: '45%',
    score: 64,
    rank: 17,
  },
  {
    id: 18,
    name: '麦洪彬',
    class: '20软件2班',
    progress: '45%',
    score: 59,
    rank: 18,
  },
  {
    id: 19,
    name: '杜琪琪',
    class: '20软件2班',
    progress: '45%',
    score: 58,
    rank: 19,
  },
  {
    id: 20,
    name: '苏浩贤',
    class: '20软件1班',
    progress: '45%',
    score: 55,
    rank: 20,
  },
]);
</script>

<template>
  <loader v-if="flag1"></loader>
  <template v-else>
    <view class="header">
      <view class="header_left" :class="{ active: flag }" @click="switchbar">排行榜</view>
      <view class="header_right" :class="{ active: !flag }" @click="switchbar">我的成绩</view>
    </view>
    <view class="container">
      <view class="itemList">
        <template v-if="flag">
          <view class="item">
            <view>排名</view>
            <view style="position: absolute; left: 43vw">姓名</view>
            <view style="position: absolute; right: 18vw">分数</view>
          </view>
          <view class="item animate__animated animate__fadeInUp" v-for="item in ranklist" :key="item.id">
            <image src="../../static/svg/one.svg" mode="" v-if="item.rank === 1"></image>
            <image src="../../static/svg/two.svg" mode="" v-else-if="item.rank === 2"></image>
            <image src="../../static/svg/three.svg" mode="" v-else-if="item.rank === 3"></image>
            <view style="width: 60rpx; height: 60rpx; text-align: center; line-height: 60rpx" v-else>{{ item.rank }}
            </view>
            <image src="/static/images/man.svg" mode="" id="avator"></image>
            <view class="item_one">
              <view>{{ item.name }}</view>
              <view style="font-size: 20rpx">{{ item.class }}</view>
            </view>
            <view class="score">{{ item.score }}</view>
          </view>
        </template>
        <template v-else>
          <view class="item">
            <view id="score">&nbsp;&nbsp;&nbsp;425</view>
          </view>
          <!-- <image src="../../static/svg/score.svg" mode="" id="score"></image> -->
        </template>
      </view>

      <!-- <view class="header">
        <view class="active" :style="{ left: switchLeft + 'px' }"></view>
        <view @click="switch1($event)">专业排名</view>
        <view @click="switch1($event)">全校排名</view>
      </view> -->
    </view>
  </template>
</template>

<style scoped lang="scss">
.header {
  top: 0;
  position: sticky;
  // z-index: 2;
  height: 25vh;
  background-color: $bgcolor;
  @include flex(center);

  view {
    width: 120rpx;
    height: 60rpx;
    font-size: 25rpx;
    line-height: 60rpx;
    text-align: center;
    color: #fff;
    border: 1px solid #ffffff;
  }

  &_left {
    border-top-left-radius: 10rpx;
    border-bottom-left-radius: 10rpx;
  }

  &_right {
    border-top-right-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
  }

  .active {
    background-color: #fff;
    color: $bgcolor;
  }
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateY(-80rpx);

  // z-index: 3;
  .itemList {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;

    .item {
      margin: 10px auto;
      width: 90vw;
      padding: 15rpx 0;
      @include flex(flex-start);
      border-bottom: 2rpx solid #f6f6f7;

      image {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
      }

      #avator {
        position: absolute;
        left: 25vw;
      }

      &_one {
        position: absolute;
        left: 40vw;
        @include flex-column(space-between);
      }

      .score {
        position: absolute;
        right: 20vw;
      }

      #score {
        margin: auto;
        width: 400rpx;
        height: 400rpx;
        background-image: url('../../static/svg/score.svg');
        background-size: cover;
        // background-color: aqua;
        font-size: 65rpx;
        font-weight: 600;
        text-align: center;
        line-height: 550rpx;
        color: rgba(255, 182, 0, 1);
      }
    }
  }
}

// .header {
//   position: relative;
//   margin: 10px auto;
//   width: 90vw;
//   height: 100rpx;
//   color: #f7fbff;
//   background-color: #d1f4fd;
//   border-radius: 10rpx;

//   @include flex(); //使用样式

//   view {
//     width: 50%;
//     text-align: center;
//     z-index: 2;
//   }

//   .active {
//     position: absolute;
//     border-radius: 10rpx;
//     height: 100%;
//     background-color: #5f80f8;
//     transition-duration: 0.6s;
//     transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
//   }
// }
</style>
